<template>
    <page-box class="container">
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName($route.path)"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>{{
                    $route.query.id ? "编辑" : "新增"
                }}</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <page-search-column class="fixed-column">
            <page-search-item class="right">
                <el-button @click="handleReset('ruleForm')">取消</el-button>
                <el-button type="primary" @click="handleSubmit('ruleForm')"
                    >保存</el-button
                >
            </page-search-item>
        </page-search-column>
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="ruleForm"
            label-position="right"
        >
            <el-form-item label="项目名称" prop="name" width="240px">
                <el-input
                    v-model="ruleForm.name"
                    type="text"
                    placeholder="请输入项目名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="项目类型" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择项目类型">
                    <el-option
                        v-for="item in typeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="投资方" prop="investor">
                <el-input
                    v-model="ruleForm.investor"
                    placeholder="请输入投资方名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="项目建设内容" prop="projectContent">
                <el-input
                    type="textarea"
                    v-model="ruleForm.projectContent"
                    maxlength="300"
                    show-word-limit
                    placeholder="请输入项目建设内容"
                ></el-input>
            </el-form-item>
            <el-form-item label="投资总金额(万元)">
                <el-input
                    type="number"
                    v-model="ruleForm.totalInvestment"
                ></el-input>
            </el-form-item>
            <el-form-item label="牵头领导">
                <!--                <el-button class="item-btn-text" @click="leadVisible = true">{{
                    leadText || "请选择"
                }}</el-button>-->
                <el-input
                    v-model="ruleForm.leadName"
                    placeholder="请输入牵头领导姓名"
                ></el-input>
            </el-form-item>
            <el-form-item label="负责单位/人" prop="responsible">
                <el-input
                    v-model="ruleForm.responsible"
                    placeholder="请输入负责单位/人"
                ></el-input>
            </el-form-item>
            <el-form-item label="项目查看权限" required>
                <el-button class="item-btn-text" @click="changeReceiver">{{
                    btnText || "请选择"
                }}</el-button>
            </el-form-item>
            <el-form-item label="项目完成日期" prop="time">
                <el-date-picker
                    v-model="ruleForm.time"
                    type="date"
                    placeholder="项目完成时间"
                    format="yyyy年MM月dd日"
                    value-format="yyyy-MM-dd"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="项目地址" required>
                <span v-if="ruleForm.address" class="city">{{
                    ruleForm.address
                }}</span>
                <el-button @click="selectAddress(mapData)">选择地址</el-button>
            </el-form-item>
            <el-form-item label="项目关键节点" required class="tableItem">
                <el-col class="line" :span="11">最终计划进度需达到100%</el-col>
                <el-table :data="ruleForm.stageList" border>
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="项目节点名称"
                        width="200"
                    >
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input
                                    placeholder="请输入项目节点名称"
                                    v-model="scope.row.name"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="endDate"
                        label="计划完成时间"
                        width="180"
                    >
                        <template slot-scope="scope">
                            <el-date-picker
                                v-model="scope.row.endDate"
                                type="date"
                                placeholder="计划完成时间"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                            >
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="proportion"
                        label="项目占比"
                        width="180"
                    >
                        <template slot-scope="scope">
                            <div class="process">
                                <el-input
                                    v-model.number="scope.row.proportion"
                                    placeholder="请填写计划进度占比"
                                    size="medium"
                                ></el-input>
                                <span>%</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="89">
                        <template slot-scope="scope">
                            <el-button
                                @click="handleClickAdd()"
                                type="text"
                                size="small"
                                >添加</el-button
                            >
                            <el-button
                                v-if="scope.$index > 0"
                                type="text"
                                size="small"
                                @click="handleClickRemove(scope)"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="图片" required class="upload-gruop">
                <el-upload
                    ref="pictureUpload"
                    :action="$staticUrl"
                    :file-list="fileList"
                    list-type="picture-card"
                    :auto-upload="true"
                    :data="uploadData"
                    :limit="9"
                    :on-exceed="handleExceed"
                    :before-upload="beforeAvatarUpload"
                    :on-success="handleOnsuccess"
                >
                    <i slot="default" class="el-icon-plus"></i>
                    <div class="el-upload__tip" slot="tip">
                        单张最大6M，最多上传9张，图片格式支持.jpg、.jpeg、.png格式
                    </div>
                    <div slot="file" slot-scope="{ file }">
                        <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url"
                            alt=""
                        />
                        <span class="el-upload-list__item-actions">
                            <span
                                class="el-upload-list__item-preview"
                                @click="handlePictureCardPreview(file)"
                            >
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span
                                v-if="!disabled"
                                class="el-upload-list__item-delete"
                                @click="handleRemove(file)"
                            >
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
            </el-form-item>
            <el-form-item label="备注">
                <el-input
                    type="textarea"
                    v-model="ruleForm.remarks"
                    maxlength="500"
                    show-word-limit
                    placeholder="请输入备注"
                ></el-input>
            </el-form-item>
        </el-form>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
        <map-location
            ref="MapLocation"
            @updateAddress="updateAddress"
        ></map-location>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import { getUUID } from "@/utils";
import AuthMixin from "@/components/public/upload/auth.mixin.ts";
import MapLocation from "@/components/map-location/index.vue";
import { State } from "vuex-class";
import { dialogSelect } from "@/views/process-manage/src/components/person-selection/index";
@Component({
    name: "AddItem",
    components: {
        MapLocation
    }
})
export default class AddItem extends Mixins(AuthMixin) {
    @State(state => state.authArea) authArea: any;
    @State(state => state.user.userInfo) user: any;
    // 项目类型下拉列表数据
    typeList = [
        // { id: 1, name: "招商引资项目" },
        { id: 2, name: "工程建设项目" },
        { id: 3, name: "民生服务项目" }
    ];

    // 上传图片后的数据
    fileList: any[] = [];
    // 上传到腾讯云后返回的数据
    sourceList: any[] = [];
    // 查看图片时当前图片的url
    dialogImageUrl = "";
    // 图片查看器的显示与隐藏
    dialogVisible = false;
    // 控制选择负责单位/人弹窗的显示与隐藏
    leadVisible = false;
    disabled = false;
    path = "";
    // 上传图片时需要携带的参数
    uploadData: any = {
        signature: "",
        "x-cos-security-token": "",
        "Content-Type": "",
        key: "",
        dir: "",
        host: ""
    };

    // 表单数据
    ruleForm: any = {
        name: "",
        type: "",
        investor: "",
        projectContent: "",
        totalInvestment: 0,
        leadName: "",
        responsible: "",
        stageName: "",
        process: "",
        remarks: "",
        projectAuth: [],
        time: "",
        stageList: [
            {
                name: "",
                endDate: "",
                proportion: 0,
                id: ""
            }
        ],
        address: "",
        lngLat: ""
    };

    // 地图经纬度和城市名称
    mapData = {
        address: "",
        cityAddress: "",
        longitude: "",
        latitude: ""
    };

    // 校验规则
    rules = {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        type: [
            { required: true, message: "请选择项目类型", trigger: "change" }
        ],
        // leadName: [
        //     { required: true, message: "请选择牵头领导", trigger: "change" }
        // ],
        time: [
            { required: true, message: "请选择项目完成时间", trigger: "change" }
        ],
        governmentName: [
            { required: true, message: "请输入项目地址", trigger: "blur" }
        ],
        investor: [
            { required: true, message: "请输入投资方名称", trigger: "blur" }
        ],
        projectContent: [
            { required: true, message: "请输入项目建设内容", trigger: "blur" }
        ],
        responsible: [
            { required: true, message: "请输入负责单位/人", trigger: "blur" }
        ]
    };

    // 项目查看权限人员的姓名
    btnText = "";
    selectedItemList: any[] = [];
    // 牵头领导
    leadText = "";

    created() {
        const projectID = this.$route.query.id;
        if (projectID) {
            this.getFormDetails(projectID);
        }
    }

    // 选择地址
    selectAddress(data: any) {
        (this.$refs.MapLocation as any).show(data);
    }

    // 选址后回调
    updateAddress(data: any) {
        this.ruleForm.address = `${data.address}/${data.infoAddress}`;
        this.ruleForm.lngLat = `${data.lng},${data.lat}`;
        this.mapData = {
            address: data.address,
            cityAddress: data.infoAddress,
            longitude: data.lng,
            latitude: data.lat
        };
    }

    // 编辑项目时通过项目列表传过来的数据获取项目详情  从而编辑项目
    async getFormDetails(id: any) {
        const res = await this.$server["project/editItem"]({
            data: {
                id: id
            }
        });
        if (res.data.code === 200) {
            this.ruleForm.name = res.data.data.name;
            this.ruleForm.time = res.data.data.endDate;
            this.ruleForm.type = res.data.data.type;
            this.ruleForm.investor = res.data.data.investor;
            this.ruleForm.projectContent = res.data.data.projectContent;
            this.ruleForm.totalInvestment =
                (res.data.data.totalInvestment as any) / 10000;
            this.ruleForm.leadName = res.data.data.leadName;
            this.ruleForm.responsible = res.data.data.responsible;
            this.ruleForm.stageName = res.data.data.stageName;
            this.ruleForm.process = res.data.data.process;
            this.ruleForm.remarks = res.data.data.remarks;
            this.ruleForm.stageList = res.data.data.stage;
            this.ruleForm.projectAuth = res.data.data.projectAuth.filter((i: any) => i !== this.user.id);
            this.ruleForm.address = res.data.data.address;
            this.ruleForm.lngLat = res.data.data.lngLat;
            // 当是编辑项目时，初始化地图的城市名字以及经纬度
            this.mapData = {
                address: this.ruleForm.address.substring(
                    0,
                    this.ruleForm.address.indexOf("/")
                ),
                cityAddress: this.ruleForm.address.substring(
                    this.ruleForm.address.indexOf("/") + 1
                ),
                longitude: this.ruleForm.lngLat.split(",")[0],
                latitude: this.ruleForm.lngLat.split(",")[1]
            };
            // 初始化图片路径列表用于回显
            const imgList = res.data.data.resImgList;
            const list: any[] = [];
            imgList.forEach((item: any) => {
                list.push({
                    url: `${item}`
                });
            });
            this.fileList = this.fileList.concat(list);
            this.sourceList = this.sourceList.concat(list);
            this.fileList = this.fileList.map((item: any) => {
                return {
                    uid: item.uid,
                    url: `${this.$staticUrl}${item.url}`
                };
            });
            this.$nextTick(() => {
                this.fileList.forEach((item: any, i: any) => {
                    this.sourceList[i]._id = item.uid;
                });
            });
            // 牵头领导和项目查看权限的人员编辑项目时  用于回显
            const PersonInfo = await this.getAllPersonInfo();
            const nameList: any[] = [];
            (PersonInfo as any).forEach((item: any) => {
                this.ruleForm.projectAuth.forEach((subItem: any) => {
                    if (item.id === subItem) {
                        nameList.push(item.name);
                        this.selectedItemList.push(item);
                    }
                });
            });
            this.btnText = nameList.toString();
        }
    }

    changeReceiver() {
        dialogSelect({
            selectedList: [...this.ruleForm.projectAuth],
            selectedItemList: [...this.selectedItemList],
            isSingle: false,
            title: "项目查看人员选择",
            tabs: [
                {
                    label: "镇成员",
                    name: "town",
                    type: "group"
                }
            ],
            sure: (vm: any, model: any) => {
                vm.close();
                this.ruleForm.projectAuth = model.selectedList;
                this.selectedItemList = model.selectedItemList;
                const nameList: any[] = [];
                model.selectedItemList.forEach((item: any) => {
                    nameList.push(item.name);
                });
                this.btnText = nameList.toString();
            },
            getOptions: (vm: any) => this.getOptions(vm)
        });
    }

    async getOptions(vm: any) {
        const res = await this.$server["org/getMember"]({
            data: {
                departmentId: "",
                pageSize: 999,
                currentPage: 1
            },
            loader: false
        });
        if (res.data.code === 200) {
            const arrObj: any = {};
            res.data.data.records.filter((item: any) => item.id !== this.user.id).forEach((item: any) => {
                if (item.id === this.user.id) {
                    item.disabled = true;
                }
                if (arrObj[item.departmentId]) {
                    arrObj[item.departmentId].push({
                        ...item,
                        governmentName: item.departmentName
                    });
                } else {
                    arrObj[item.departmentId] = [
                        {
                            ...item,
                            governmentName: item.departmentName
                        }
                    ];
                }
            });
            vm.getOptions(Object.values(arrObj) || []);
        } else {
            vm.getOptions([]);
        }
    }

    // 返回所有人员的信息
    getAllPersonInfo() {
        return new Promise((resolve: any, reject: any) => {
            this.$server["org/getMember"]({
                data: {
                    departmentId: "",
                    pageSize: 999999,
                    currentPage: 1
                }
            })
                .then((res: any) => {
                    resolve(res.data.data.records);
                })
                .catch((e: any) => {
                    return reject(new Error(e));
                });
        });
    }

    //  给表格添加某一项
    handleClickAdd() {
        const obj = {
            name: "",
            endDate: "",
            proportion: 0,
            id: ""
        };
        this.ruleForm.stageList.push(obj);
    }

    // 删除表格某一项
    handleClickRemove(scope: any) {
        this.ruleForm.stageList.splice(scope.$index, 1);
    }

    // 当图片的个数超出限制时
    handleExceed(files: any, fileList: any) {
        this.$message.warning(
            `当前限制选择 9 个文件，本次选择了 ${
                files.length
            } 个文件，共选择了 ${files.length + fileList.length} 个文件`
        );
    }

    handleOnsuccess(response: any, file: any, fileList: any) {
        this.fileList = fileList;
    }

    // 删除图片时，同时更新视图和数据
    handleRemove(file: any) {
        (this.$refs.pictureUpload as any).handleRemove(file);
        const index = this.sourceList.findIndex(
            (item: any) => item._id === file.uid
        );
        const num = this.fileList.findIndex(
            (item: any) => item.uid === file.uid
        );
        this.sourceList.splice(index, 1);
        this.fileList.splice(num, 1);
    }

    // 预览图片
    handlePictureCardPreview(file: any) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    }

    // 提交表单
    async handleSubmit(formName: any) {
        const projectID = this.$route.query.id;
        (this.$refs[formName] as any).validate((valid: any) => {
            if (valid) {
                this.ruleForm.projectAuth.push(this.user.id);
                let proportion = 0;
                this.ruleForm.stageList.map((item: any) => {
                    proportion += item.proportion;
                });
                if (proportion !== 100) {
                    return this.$message.error(
                        "所有节点的项目占比累计应等于100%"
                    );
                }
                if (this.fileList.length === 0) {
                    return this.$message.error("请上传图片");
                }
                if (this.ruleForm.projectAuth.length === 0) {
                    return this.$message.error("请选择项目查看人员");
                }
                const imgList: any[] = [];
                this.sourceList.map((item: any) => {
                    imgList.push(item.url);
                });
                const data = {
                    investor: this.ruleForm.investor,
                    leadName: this.ruleForm.leadName,
                    name: this.ruleForm.name,
                    endDate: this.ruleForm.time,
                    projectAuth: this.ruleForm.projectAuth,
                    projectContent: this.ruleForm.projectContent,
                    totalInvestment:
                        Number(this.ruleForm.totalInvestment) * 10000,
                    resList: imgList,
                    responsible: this.ruleForm.responsible,
                    stageList: this.ruleForm.stageList,
                    remarks: this.ruleForm.remarks,
                    type: this.ruleForm.type,
                    address: this.ruleForm.address,
                    lngLat: this.ruleForm.lngLat
                };
                // 判断是否有项目id 没有就是新建项目否则就是编辑更新项目
                if (!projectID) {
                    this.$server["project/addItem"]({
                        data: data
                    }).then((res: any) => {
                        if (res.data.code === 200) {
                            this.$message.success("提交成功");
                            this.ruleForm = {
                                name: "",
                                type: "",
                                investor: "",
                                projectContent: "",
                                totalInvestment: 0,
                                leadName: "",
                                responsible: "",
                                stageName: "",
                                process: "",
                                remarks: "",
                                projectAuth: [],
                                time: "",
                                address: "",
                                lngLat: "",
                                stageList: [
                                    {
                                        name: "",
                                        endDate: "",
                                        proportion: 0,
                                        id: ""
                                    }
                                ]
                            };
                            this.fileList = [];
                            this.sourceList = [];
                            (this.$refs.pictureUpload as any).clearFiles();
                            (this.$refs[formName] as any).resetFields();
                            this.$router.push({
                                name: "ProjectList"
                            });
                        } else {
                            this.$message.error(res.data.message);
                        }
                    });
                } else {
                    this.$server["project/updateItem"]({
                        data: {
                            ...data,
                            id: projectID
                        }
                    }).then((res: any) => {
                        if (res.data.code === 200) {
                            this.$message.success("编辑成功");
                            this.ruleForm = {
                                name: "",
                                type: "",
                                investor: "",
                                projectContent: "",
                                totalInvestment: 0,
                                leadName: "",
                                responsible: "",
                                stageName: "",
                                process: "",
                                remarks: "",
                                projectAuth: [],
                                time: "",
                                address: "",
                                lngLat: "",
                                stageList: [
                                    {
                                        name: "",
                                        endDate: "",
                                        proportion: 0,
                                        id: ""
                                    }
                                ]
                            };
                            this.fileList = [];
                            this.sourceList = [];
                            (this.$refs.pictureUpload as any).clearFiles();
                            (this.$refs[formName] as any).resetFields();
                            this.$router.push({
                                name: "ProjectList"
                            });
                        } else {
                            this.$message.error(res.data.message);
                        }
                    });
                }
            } else {
                return false;
            }
        });
    }

    // 重置表单
    handleReset(formName: any) {
        this.ruleForm = {
            name: "",
            type: "",
            investor: "",
            projectContent: "",
            totalInvestment: 0,
            leadName: "",
            responsible: "",
            stageName: "",
            process: "",
            remarks: "",
            projectAuth: [],
            time: "",
            address: "",
            lngLat: "",
            stageList: [
                {
                    name: "",
                    endDate: "",
                    proportion: 0,
                    id: ""
                }
            ]
        };
        (this.$refs[formName] as any).resetFields();
        this.fileList = [];
        (this.$refs.pictureUpload as any).clearFiles();
        this.$router.push({
            name: "ProjectList"
        });
    }

    // 图片上传之前把每张图片上传到腾讯云同时验证格式
    beforeAvatarUpload(file: any) {
        const isTYPE = file.type;
        const fileTypeList = ["image/jpg", "image/png", "image/jpeg"];
        const isLt6M = file.size / 1024 / 1024 < 6;
        if (!fileTypeList.includes(isTYPE)) {
            this.$message.error("上传图片只能是 JPG、PNG、JPEG 格式!");
            return false;
        }
        if (!isLt6M) {
            this.$message.error("上传图片大小不能超过 6MB!");
            return false;
        }
        return new Promise((resolve: any, reject: any) => {
            const _path = "/project-manage/img/" + new Date().format("yyyy-MM-dd") + "/" + this.path;
            this.getAuthorization({ Method: "POST", Pathname: "/" })
                .then((info: any) => {
                    this.uploadData.signature = info.Authorization;
                    this.uploadData["x-cos-security-token"] =
                        info.XCosSecurityToken;
                    this.uploadData["Content-Type"] = "";
                    this.uploadData.key =
                        _path +
                        getUUID() +
                        "." +
                        (file.file
                            ? file.file.type.split("/")[1]
                            : file.type.split("/")[1]);
                    this.uploadData.dir = _path;
                    this.uploadData.host = this.$staticUrl;
                    this.sourceList.push({
                        _id: file.uid,
                        url: this.uploadData.key + "?name=" + file.name
                    });
                    resolve(true);
                })
                .catch((err: any) => {
                    this.$message.error({
                        message: err.message || err.content || "接口请求失败",
                        type: "error",
                        duration: 1500
                    });
                    return reject(new Error(err));
                });
        });
    }
}
</script>

<style lang="scss" scoped>
.container /deep/.page-base-body {
    background-color: transparent;
    height: calc(100% - 50px);
}
.go-back {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/deep/.ruleForm {
    background: #ffffff;
    margin-top: 10px;
    padding-top: 12px;
    padding-bottom: 24px;
    .el-form-item {
        width: 900px;
        display: flex;
        .el-form-item__label {
            display: inline-block;
            width: 144px !important;
            padding-left: 24px;
        }
        .el-input--medium {
            width: 320px;
        }
        .el-select--medium {
            margin-left: 0 !important;
        }
        .el-form-item__content {
            margin-left: 0 !important;
            .city {
                display: inline-block;
                border: 1px solid #dcdfe6;
                border-radius: 4px;
                color: #606266;
                padding: 0 15px;
                margin-right: 12px;
            }
            .line {
                font-size: 12px;
                color: #999;
            }
            .el-table {
                width: 700px;
                .el-form-item {
                    width: 100%;
                }
                .el-input--medium,
                .el-date-editor {
                    width: 100% !important;
                }
                .process {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    span {
                        font-size: 12px;
                        color: #9e9999;
                        margin-left: 6px;
                    }
                }
            }
            /deep/.el-upload {
                position: relative;
                .el-icon-plus {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
        .el-upload__tip {
            font-size: 12px;
            color: #a8aaad;
            margin-top: 0;
        }
    }
    .tableItem {
        .el-form-item__content {
            width: 700px;
        }
    }
}
/deep/.el-dialog__wrapper {
    .el-dialog__body {
        height: 500px;
        overflow-y: scroll;
        .el-radio-group {
            width: 100%;
        }
        .data {
            padding: 0 12px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            label {
                width: calc(100% / 7);
                margin-right: 0;
                margin-bottom: 10px;
                @include textEllipsis();
            }
            .el-checkbox {
                font-size: 14px;
                font-weight: 500;
                line-height: 22px;
                margin-bottom: 16px;
                padding-top: 12px;
            }
        }
        .nodata {
            font-size: 12px;
            padding: 0 12px;
            color: #9da1a4;
        }
    }
}
.item-btn-text {
    max-width: 320px;
    font-size: 14px;
    font-family: "PingFang SC Medium";
    color: #37383a;
    @include textEllipsis();
}
</style>
